<template>
  <Layout>
    <div class="fade-in p-6 bg-gray-100 min-h-screen">
      <h2 class="text-2xl font-bold text-gray-800 mb-6">订单详情 (ID: {{ orderId }})</h2>

      <div v-if="loading" class="text-center text-gray-500">
        加载中...
      </div>

      <div v-else-if="error" class="text-center text-red-600">
        {{ error }}
      </div>

      <div v-else-if="order" class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
          <div>
            <p class="text-gray-600">订单状态:</p>
            <span
              class="px-2 py-1 rounded-full text-sm font-semibold"
              :class="{
                'bg-blue-100 text-blue-800': order.status === 'pending',
                'bg-green-100 text-green-800': order.status === 'completed',
                'bg-red-100 text-red-800': order.status === 'cancelled'
              }"
            >
              {{ getStatusName(order.status) }}
            </span>
          </div>
          <div>
            <p class="text-gray-600">下单时间:</p>
            <p class="font-medium">{{ formatDateTime(order.created_at) }}</p>
          </div>
          <div class="md:col-span-2">
            <p class="text-gray-600">总金额:</p>
            <p class="text-xl font-bold text-indigo-600">¥{{ order.total_amount.toFixed(2) }}</p>
          </div>
        </div>

        <h3 class="text-lg font-semibold text-gray-800 mb-4">订单项</h3>
        <div class="divide-y divide-gray-200">
          <div v-for="item in order.items" :key="item.id" class="flex items-center py-4">
            <img v-if="item.item.image_url" class="w-16 h-16 object-cover rounded-md mr-4" :src="item.item.image_url" :alt="item.item.name" />
            <div class="flex-grow">
              <div class="text-md font-medium text-gray-900">{{ item.item.name }}</div>
              <div class="text-sm text-gray-500">{{ item.item.type === 'pet' ? '宠物' : '商品' }}</div>
              <div class="text-sm text-gray-700">数量: {{ item.quantity }}</div>
              <div class="text-sm text-gray-700">单价: ¥{{ item.price.toFixed(2) }}</div>
            </div>
            <div class="text-md font-semibold text-gray-800">小计: ¥{{ (item.price * item.quantity).toFixed(2) }}</div>
          </div>
        </div>
      </div>
       <div v-else class="text-center text-gray-500">
        未找到订单信息。
      </div>
    </div>
  </Layout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import Layout from '../components/Layout.vue'
import { orderService } from '../services/api'
import moment from 'moment'

const route = useRoute()
const orderId = ref(route.params.id)
const order = ref(null)
const loading = ref(true)
const error = ref(null)

// 格式化日期时间
const formatDateTime = (dateTime) => {
  return moment(dateTime).format('YYYY-MM-DD HH:mm')
}

// 获取订单状态名称
const getStatusName = (status) => {
  const statuses = {
    pending: '待处理',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statuses[status] || status
}

// 加载订单详情
const loadOrderDetail = async () => {
  if (!orderId.value) {
    error.value = '订单ID无效';
    loading.value = false;
    return;
  }

  try {
    loading.value = true;
    error.value = null;
    const response = await orderService.getById(orderId.value);
    console.log('Order detail response:', response); // 添加日志
    if (response) {
      order.value = response;
    } else {
      error.value = '未找到订单信息';
    }
  } catch (err) {
    console.error('Failed to load order detail:', err);
    error.value = err.response?.data?.error || '加载订单详情失败';
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  if (orderId.value) {
    loadOrderDetail()
  }
})
</script>

<style scoped>
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.rounded-xl {
    border-radius: 0.75rem;
}

.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.p-6 {
    padding: 1.5rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.text-gray-800 {
    color: #2d3748;
}

.font-bold {
    font-weight: 700;
}

.text-center {
    text-align: center;
}

.text-red-600 {
    color: #e53e3e;
}

.bg-white {
    background-color: #fff;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.md\:grid-cols-2 {
     @media (min-width: 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gap-4 {
    gap: 1rem;
}

.text-gray-600 {
    color: #718096;
}

.text-sm {
    font-size: 0.875rem;
}

.font-semibold {
    font-weight: 600;
}

.rounded-full {
    border-radius: 9999px;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.bg-blue-100 {
    background-color: #ebf8ff;
}

.text-blue-800 {
    color: #2a4365;
}

.bg-green-100 {
    background-color: #f0fff4;
}

.text-green-800 {
    color: #2f855a;
}

.bg-red-100 {
     background-color: #fff5f5;
}

.text-red-800 {
    color: #9b2c2c;
}

.font-medium {
    font-weight: 500;
}

.text-xl {
    font-size: 1.25rem;
}

.text-indigo-600 {
     color: #5a67d8;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgba(237, 242, 247, var(--tw-divide-opacity));
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.w-16 {
    width: 4rem;
}

.h-16 {
    height: 4rem;
}

.object-cover {
    object-fit: cover;
}

.rounded-md {
    border-radius: 0.375rem;
}

.mr-4 {
    margin-right: 1rem;
}

.flex-grow {
    flex-grow: 1;
}

.text-md {
    font-size: 1rem;
}

.text-gray-900 {
    color: #1a202c;
}

.text-gray-700 {
    color: #4a5568;
}

.min-h-screen {
    min-height: 100vh;
}
</style> 